<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/mvc">
<head>
    <title th:text="${company.name}">title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8">
    <meta name="keywords" content=""/>
    <script type="application/x-javascript">
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, {passive : false});

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <link th:href="@{css/bootstrap.css}" rel="stylesheet" type="text/css" media="all"/>
    <link th:href="@{css/style.css}" rel="stylesheet" type="text/css" media="all"/>
    <link th:href="@{css/font-awesome.css}" rel="stylesheet">
    <script th:src="@{js/jquery-2.2.3.min.js}"></script>
    <script th:src="@{js/bootstrap.js}"></script>
</head>
<body>
<div class="w3-banner jarallax" th:style="|background:url('${bigImgs[0]}')|">
    <div class="wthree-different-dot">
        <div th:replace="embed/head::topFrag"></div>
        <div th:replace="embed/head::headFrag"></div>
        <div class="banner">
            <div class="container">
                <div class="slider">
                    <script th:src="@{js/responsiveslides.min.js}"></script>
                    <script>
                        $(function () {
                            $("#slider3").responsiveSlides({
                                auto: true,
                                pager: true,
                                nav: true,
                                speed: 500,
                                namespace: "callbacks",
                                before: function () {
                                    $('.events').append("<li>before event fired.</li>");
                                },
                                after: function () {
                                    $('.events').append("<li>after event fired.</li>");
                                }
                            });
                        });
                    </script>
                    <div id="top" class="callbacks_container-wrap">
                        <ul class="rslides" id="slider3">
                            <li th:each="carousel : ${carousels}">
                                <div class="slider-info">
                                    <h3 th:text="${carousel.title}"></h3>
                                    <p th:text="${carousel.subTitle}"></p>
                                    <div class="more-button">
                                        <a href="#" data-toggle="modal" th:attr="data-target=|#${carousel.id}|">Read
                                            More</a>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="services">
    <div class="container">
        <h2 class="agileits-title">Services</h2>
        <div class="w3-services-grids">
            <div class="col-md-3 col-xs-6 w3l-services-grid">
                <div class="w3l-services-text">
                    <div class="w3ls-services-img">
                        <i class="fa fa-comment-o" aria-hidden="true"></i>
                    </div>
                    <div class="agileits-services-info">
                        <h4>Vaesent purus</h4>
                        <p>Donec non nibh in dui sagittis finibus. Duis suscipit arcu vel rhoncus molestie. </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 w3l-services-grid">
                <div class="w3l-services-text">
                    <div class="w3ls-services-img">
                        <i class="fa fa-heart-o" aria-hidden="true"></i>
                    </div>
                    <div class="agileits-services-info">
                        <h4>Suscipit duis </h4>
                        <p>Nibh in dui sagittis donec non finibus. Duis suscipit arcu vel rhoncus molestie. </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 w3l-services-grid">
                <div class="w3l-services-text">
                    <div class="w3ls-services-img">
                        <i class="fa fa-clone" aria-hidden="true"></i>
                    </div>
                    <div class="agileits-services-info">
                        <h4>Tempor purus</h4>
                        <p>Sagittis donec non nibh in dui finibus. Duis suscipit arcu vel rhoncus molestie. </p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 w3l-services-grid">
                <div class="w3l-services-text">
                    <div class="w3ls-services-img">
                        <i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
                    </div>
                    <div class="agileits-services-info">
                        <h4>Pra tempor</h4>
                        <p>Arcu vel dui sagittis donecnon finibus. Duis suscipit rhoncus molestie. </p>
                    </div>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="stats services news-w3layouts jarallax" th:style="|background:url('${bigImgs[1]}')|">
    <div class="container">
        <div class="stats-agileinfo agileits-w3layouts">
            <div class="col-sm-3 col-xs-6 stats-grid">
                <div class="stats-img">
                    <i class="fa fa-users" aria-hidden="true"></i>
                </div>
                <h6>Happy Clients</h6>
                <div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='157000'
                     data-delay='.5' data-increment="100">157000
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 stats-grid">
                <div class="stats-img w3-agileits">
                    <i class="fa fa-calendar-check-o" aria-hidden="true"></i>
                </div>
                <h6>Branches</h6>
                <div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='850' data-delay='8'
                     data-increment="1">850
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 stats-grid">
                <div class="stats-img w3-agileits">
                    <i class="fa fa-briefcase" aria-hidden="true"></i>
                </div>
                <h6>Our Events </h6>
                <div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='5000'
                     data-delay='.5' data-increment="10">5000
                </div>
            </div>
            <div class="col-sm-3 col-xs-6 stats-grid">
                <div class="stats-img w3-agileits">
                    <i class="fa fa-trophy" aria-hidden="true"></i>
                </div>
                <h6>Awards</h6>
                <div class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='110' data-delay='8'
                     data-increment="1">110
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <!-- Progressive-Effects-Animation-JavaScript -->
        <script type="text/javascript" th:src="@{/js/numscroller-1.0.js}"></script>
        <!-- //Progressive-Effects-Animation-JavaScript -->
    </div>
</div>
<div class="welcome">
    <div class="container">
        <h3 class="agileits-title">Welcome</h3>
        <div class="welcomerow-agileinfo">
            <h5>Blanditiis praesentium deleniti atque corrupti quos corrupti quos dolores</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus mattis pharetra turpis, a scelerisque
                enim venenatis luctus. Cras blandit dolor a facilisis tincidunt. Vivamus sed orci aliquam, aliquet
                tellus ut, ornare nunc. Praesent lacinia elit id libero pulvinar, sit amet faucibus felis ornare.
                Pellentesque nulla lorem, pretium vel bibendum in, elementum id urna. Sed interdum interdum accumsan.
                Aenean nec purus ac orci finibus facilisis. In sit amet placerat nisl, in auctor sapien.</p>
        </div>
        <div class="w3-welcome-grids">
            <div class="col-md-3 col-xs-6 w3l-welcome-grid">
                <img th:src="@{/images/g1.jpg}" alt=" " class="img-responsive"/>
                <div class="agileits-welcome-info">
                    <h4>Vaesent purus</h4>
                    <p>Donec non nibh in dui sagittis finibus. Duis suscipit arcu vel rhoncus molestie eget placerat
                        mauris. </p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 w3l-welcome-grid">
                <img th:src="@{/images/g2.jpg}" alt=" " class="img-responsive"/>
                <div class="agileits-welcome-info">
                    <h4>Suscipit duis </h4>
                    <p>Nibh in dui sagittis donec non finibus. Duis suscipit arcu vel rhoncus molestie eget placerat
                        mauris. </p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 w3l-welcome-grid">
                <img th:src="@{/images/g3.jpg}" alt=" " class="img-responsive"/>
                <div class="agileits-welcome-info">
                    <h4>Tempor purus</h4>
                    <p>Sagittis donec non nibh in dui finibus. Duis suscipit arcu vel rhoncus molestie eget placerat
                        mauris. </p>
                </div>
            </div>
            <div class="col-md-3 col-xs-6 w3l-welcome-grid">
                <img th:src="@{/images/g4.jpg}" alt=" " class="img-responsive"/>
                <div class="agileits-welcome-info">
                    <h4>Praesent tempor</h4>
                    <p>Arcu vel donec non nibh in dui sagittis finibus. Duis suscipit rhoncus molestie eget placerat
                        mauris. </p>
                </div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>
<div class="subscribe jarallax" th:style="|background:url('${bigImgs[2]}')|">
    <div class="container">
        <div class="agileits-title title2">
            <h3 class="agileits-title sub">Subscribe</h3>
        </div>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
            sit amet, consectetur adipisci velit sed quia non numquam eius.</p>
        <form action="#" method="post">
            <input type="email" name="email" placeholder="Email Address" class="user" required="">
            <input type="submit" value="Subscribe">
        </form>
    </div>
</div>
<div class="testimonial agileits-w3layouts">
    <div class="container">
        <h3 class="agileits-title">Testimonials</h3>
        <div class="sap_tabs">
            <div id="horizontalTab" style="display: block; width: 100%; margin: 0px;">
                <ul class="resp-tabs-list">
                    <li class="resp-tab-item"><img th:src="@{/images/1.png}" alt=""/></li>
                    <li class="resp-tab-item"><img th:src="@{/images/2.png}" alt=""/></li>
                    <li class="resp-tab-item"><img th:src="@{/images/3.png}" alt=""/></li>
                    <li class="resp-tab-item"><img th:src="@{/images/4.png}" alt=""/></li>

                </ul>
                <div class="resp-tabs-container">
                    <div class="tab-1 resp-tab-content">
                        <div class="view view-first">
                            <p>Donec libero dui, scelerisque ac augue id, tristique ullamcorper elit. Nam ultrices,
                                lacus vitae adipiscing aliquet, metus ipsum imperdiet libero, vitae dignissim sapien
                                diam ac nibh convallis.</p>
                            <h5>Filan Isteku</h5>
                        </div>
                    </div>
                    <div class="tab-1 resp-tab-content">
                        <div class="view view-first">
                            <p>Scelerisque ac augue id Donec libero dui, tristique ullamcorper elit. Nam ultrices, lacus
                                vitae adipiscing aliquet, metus ipsum imperdiet libero, vitae dignissim sapien diam ac
                                nibh convallis.</p>
                            <h5>Ullam Firose </h5>
                        </div>
                    </div>
                    <div class="tab-1 resp-tab-content">
                        <div class="view view-first">
                            <p>Nam ultrices lacus vitae adipiscing aliquet, metus ipsum imperdiet libero, vitae
                                dignissim sapientristique Donec libero dui, scelerisque ac augue id, ullamcorper
                                elit,diam ac nibh convallis.</p>
                            <h5>Sque Augue</h5>
                        </div>
                    </div>
                    <div class="tab-1 resp-tab-content">
                        <div class="view view-first">
                            <p>Nam ultrices lacus vitae adipiscing aliquet, metus ipsum imperdiet libero, vitae
                                dignissim sapientristique Donec libero dui, scelerisque ac augue id, ullamcorper
                                elit,diam ac nibh convallis.</p>
                            <h5>Metus Ipsum</h5>
                        </div>
                    </div>

                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<div th:include="embed/articles::articles"></div>
<div th:include="embed/company::companyInfo"></div>
<div th:include="embed/buriedpoint::buriedpoint"></div>
<script th:src="@{js/easyResponsiveTabs.js}" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('#horizontalTab').easyResponsiveTabs({
            type: 'default', //Types: default, vertical, accordion
            width: 'auto', //auto or any width like 600px
            fit: true   // 100% fit in a container
        });
    });
</script>

<script th:src="@{/js/jarallax.js}"></script>
<script th:src="@{/js/SmoothScroll.min.js}"></script>
<script type="text/javascript">
    $('.jarallax').jarallax({
        speed: 0.5,
        imgWidth: 1366,
        imgHeight: 768
    })
</script>
</body>
</html>